{extend name="$base" /}
{block name="resources"}
<script type="text/javascript" src="__STATIC__/My97DatePicker/WdatePicker.js"></script>
<style type="text/css">
	.basic_data_ons{
		width: 100%;
		height: 120px;
		box-sizing: border-box;
		border: 1px solid #e6e9f0;
	}
	.basic_data_ons .basic_data_ons_son{
		width: 100%;
		height: 30px;
		line-height: 30px;
		font-size: 13px;
		border-bottom: 1px solid  #e6e9f0;
		text-indent: 10px;
		background: #f5f7fa;
	}
	.basic_data_ons .basic_data_ons_son_list{
		width: 100%;
		height: 84%;
	}
	.basic_data_ons .basic_data_ons_son_list li{
		width: 25%;
		height: 100%;
		float: left;
	}
	.basic_data_ons .basic_data_ons_son_list li .basic_data_ons_son_list_nvs{
		width:80%;
		height:80%;
		margin:0 auto;
		text-align:center;
	}
	.basic_data_ons .basic_data_ons_son_list li .basic_data_ons_son_list_nvs p{
		line-height: 30px;
		font-size: 13px;
		color: #5e6166;
		margin-top: 10px;
		margin-bottom: 0;
	}
	.basic_data_ons .basic_data_ons_son_list li .basic_data_ons_son_list_nvs cite{
		line-height: 39px;
		font-size: 20px;
		color: #00A0DE;
	}
	.mg-top-10{
		margin-top: 10px;
	}
	.today-survey{
		height: 130px;
	}

	.today-survey .survey-data ul{
		height: 100%;
		width: 100%;
	}
	.today-survey .survey-data ul li{
		height: 100%;
		width: 20%;
		float: left;
		padding-top: 20px;
		padding-left: 6%;
		box-sizing: border-box;
	}
	.today-survey .survey-data ul li h4.item-name{
		font-weight: normal;
		margin-top: 0;
		margin-bottom: 10px;
		font-size: 13px;
	}
	.today-survey .survey-data ul li .item-value{
		color: #5e6166;
		font-size: 20px;
	}
	.today-survey .survey-data ul li .trend{
		font-size: 12px;
		margin-left: 5px;
		color: rgba(179, 178, 178, 0.89);
	}
	.today-survey .survey-data ul li .trend em{
		font-style: normal;
	}
	.today-survey .survey-data ul li .trend em.rise{
		color: #ff4444;
	}
	.today-survey .survey-data ul li .trend em.rise:after{
		content: '';
		width: 15px;
		height: 12px;
		display: inline-block;
		background: url('ADMIN_IMG/shangsheng.png') no-repeat center;
		background-size: auto 100%;
	}
	.today-survey .survey-data ul li .trend em.decline{
		color: #2fae44;
	}
	.today-survey .survey-data ul li .trend em.decline:after{
		content: '';
		width: 15px;
		height: 12px;
		display: inline-block;
		background: url('ADMIN_IMG/xiajiang.png') no-repeat center;
		background-size: auto 100%;
		position: relative;
		top: 1px;
	}
</style>
{/block}
{block name="main"}
<div class="basic_data_ons">
	<div class="basic_data_ons_son">数据概况</div>
	<ul class="basic_data_ons_son_list">
		<li>
			<div class="basic_data_ons_son_list_nvs">
				<p>收入金额</p>
				<cite id="in_come">0</cite>
			</div>
		</li>
		<li>
			<div class="basic_data_ons_son_list_nvs">
				<p>支出金额</p>
				<cite id="out_come">0</cite>
			</div>
		</li>
<!--		<li>-->
<!--			<div class="basic_data_ons_son_list_nvs">-->
<!--				<p>利润金额</p>-->
<!--				<cite id="profit">0</cite>-->
<!--			</div>-->
<!--		</li>-->
		<li>
			<div class="basic_data_ons_son_list_nvs">
				<p>系统拨比</p>
				<cite id="rate">0%</cite>
			</div>
		</li>
	</ul>
</div>
<table class="mytable">
	<tr>
		<td width="10%">
			<span>发生时间：</span>
			<input type="text" id='startDate' placeholder="请选择开始日期" class="input-medium input-common  middle" onclick="WdatePicker()"/>
			&nbsp;-&nbsp;
			<input type="text" id='endDate' placeholder="请选择结束日期" class="input-medium input-common  middle" onclick="WdatePicker()" />
			<!-- 更多搜索按钮 -->
			<button class="btn-common-white more-search"><i class="fa fa-angle-down"></i></button>
			<button type="button" onclick="searchData()" value="搜索" class="btn-common" >搜索</button>
			<!-- 更多搜索下拉框 -->
			<div class="more-search-container">
				<dl>
					<dt>相关描述：</dt>
					<dd>
						<input type="text" id='search_text' placeholder="请输入相关描述" class="input-common  middle" />
					</dd>
				</dl>
				<dl>
					<dt>账户类型：</dt>
					<dd>
						<select id="category" class="select-common  middle">
							<option value="">全部</option>
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
							<option value="6">6</option>
							<option value="7">7</option>
							<option value="8">8</option>
						</select>
					</dd>
				</dl>
				<dl>
					<dt></dt>
					<dd><button onclick="searchData()" class="btn-common">搜索</button></dd>
				</dl>
			</div>
		</td>
	</tr>
</table>
<table class="table-class" >
	<thead>
	<tr align="center">
		<th ><i class="checkbox-common"><input type="checkbox" ></i></th>
		<th align="left">会员昵称</th>
		<th align="left">类型</th>
		<th align="left">总额</th>
		<th align="left">余额</th>
		<th align="left">银币</th>
		<th align="left">税金</th>
		<th align="center">说明</th>
		<th>时间</th>
	</tr>
	</thead>
	<tbody id="my-table"></tbody>
</table>
<input type="hidden" id="member_id" value="{$member_id}"/>
{/block}
{block name="script"}
<script type="text/javascript">
	function LoadingInfo(page_index) {

		var search_text = $("#search_text").val();
		var start_date = $("#startDate").val();
		var end_date = $("#endDate").val();
		var member_id = $("#member_id").val();
		var category = $("#category").val();
		$.ajax({
			type : "post",
			url : "{:__URL('ADMIN_MAIN/member/salaryList')}",
			data : {
				"page_index" : page_index,
				"page_size" : $("#showNumber").val(),
				"search_text":search_text,
				"member_id":member_id,
				"start_date":start_date,
				"end_date":end_date,
				"category" : category
			},
			success : function(data) {
				if (data["data"].length > 0) {
					$("#my-table").empty();
					for (var i = 0; i < data["data"].length; i++) {
						var html = '';
						html += '<tr align="center">';
						html += '<td><i class="checkbox-common"><input name="sub" type="checkbox" value="'+ data["data"][i]["id"] +'" ></i></td>';
						html += '<td align="left">'+data["data"][i]["nick_name"]+'<br>'+data["data"][i]["user_name"]+'</td>';
						html += '<td align="left">'+data["data"][i]["category_name"]+'</td>';
						html += '<td align="left">'+data["data"][i]["total_money"]+'</td>';
						html += '<td align="left">'+ data["data"][i]["balance"] +'</td>';
						html += '<td align="left">'+ data["data"][i]["point"] +'</td>';
						html += '<td align="left">'+ data["data"][i]["tax"] +'</td>';
						html += '<td align="left">'+ data["data"][i]["remark"] +'</td>';
						html += '<td align="center">'+ timeStampTurnTime(data["data"][i]["add_time"]) +'</td>';
						html += '</tr>';
						html += '<input type="hidden" id="member_id" value="{$member_id}"/>';
						$("#my-table").append(html);
					}
				} else {
					var html = '<tr align="center"><td colspan="8">暂无符合条件的数据记录</td></tr>';
					$("#my-table").html(html);
				}
				initPageData(data["page_count"],data['data'].length,data['total_count']);
				$("#pageNumber").html(pagenumShow(jumpNumber,$("#page_count").val(),{$pageshow}));
			}
		});
	}

	function searchData(){
		LoadingInfo(1);
		GetRate();
	}

	function GetRate(){
		var start_date = $("#startDate").val();
		var end_date = $("#endDate").val();

		$.ajax({
			type : "post",
			url : "{:__URL('ADMIN_MAIN/member/salaryRate')}",
			data : {
				"start_date":start_date,
				"end_date":end_date
			},
			success : function(data) {
				$("#in_come").html(data['in_come']);
				$("#out_come").html(data['out_come']);
				$("#profit").html(data['profit']);
				$("#rate").html(Math.round(data['rate']) + '%');
			}
		});
	}

	//点击显示更多搜索
	$(".more-search").click(function(){
		$(".more-search-container").slideToggle();
	})
	GetRate();
</script>
{/block}
